<template>
    <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!--商品循环列表-->
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- <van-cell v-for="item in productlist" :key="item" :title="item"> -->
        <div v-for="item in productlist" :key="item">
            <hr style="color: aliceblue;">
            <van-card num="2" :price="item.price" :desc="item.subName" :title="item.name"
                :thumb="item.img" @click="onClick(item.id)">
           
            </van-card>
        </div>
        <!-- </van-cell> -->
    </van-list>

</template>

<script setup lang="ts">
const onClickLeft = () => history.back();
import { ref ,reactive} from 'vue';
import { ProductApi } from '../../api';
import { useRoute,useRouter } from 'vue-router';
import { onMounted } from 'vue';
const route = useRoute();
const router = useRouter();
const productlist = ref([] as any);
const loading = ref(false);
const finished = ref(false);

//分页相关的内容
const pageData = reactive({
    pageSize:8,
    pageNum: 1,
    categoryId:0
})
onMounted(()=>{
    pageData.categoryId = Number(route.query.categoryId);
})

const onLoad = () => {
    ProductApiList()
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    // setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //         productlist.value.push(productlist.value.length + 1 );
    //     }

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        // if (productlist.value.length >= 40) {
        //     finished.value = true;
        // }
    // });
}

const ProductApiList = () => {
    //打开加载的动画效果
    loading.value = true;

    ProductApi.select.call({
        pageNum: pageData.pageNum, pageSize: pageData.pageSize,
        categoryId: pageData.categoryId

    })
        .then((res:any)=>{
            console.log(res);
            // 关闭加载的动画效果
            loading.value = false;
            if (res.items.length == 0) {
                finished.value = true;

            } else { 
                productlist.value = productlist.value.concat(res.items);
                pageData.pageNum = pageData.pageNum + 1;
            }
           
    })
}
//跳转到详情页面
const onClick = (id:number) => {
    router.push({path:'/productlist',query:{id:id}})
}

</script>

<style scoped>
:deep(.van-card__price){
    color: red !important;
    font-size: 17px !important;
    font-weight: 600;
}
:deep(.van-card__price-integer){
    font-size: 20px !important;
}
:deep(.van-card__title ){
    font-weight: 800 !important;
    font-size: 18px;
    padding-bottom: 10px;
}
</style>